import { Layout, Button } from "antd";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { MoonOutlined, ThemeOutlined, SunOutlined } from "../extraIcons";
import { useSelector, useDispatch } from "react-redux";
import { setDark } from "../../store/slices/theme";
import "./header.scss";
import ThemeModal from "../theme";
import { useState } from "react";

const { Header } = Layout;
const MyHeader = (props) => {
  const { collapsed, setCollapsed } = props;
  const [showThemeModal, setShowThemeModal] = useState(false);

  const dispatch = useDispatch();
  const theme = useSelector((state) => state.theme);

  return (
    <Header
      className="P-header"
    >
      <div className="left">
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => setCollapsed(!collapsed)}
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
          }}
        />
      </div>

      <div className="right">
        <Button
          shape="circle"
          icon={theme.dark ? <SunOutlined /> : <MoonOutlined />}
          onClick={() => dispatch(setDark(!theme.dark))}
        ></Button>

        <Button
          shape="circle"
          icon={<ThemeOutlined />}
          onClick={() => {
            setShowThemeModal(!showThemeModal);
          }}
        ></Button>
      </div>

      {showThemeModal && (
        <ThemeModal
          onClose={() => {
            setShowThemeModal(!showThemeModal);
          }}
        ></ThemeModal>
      )}
    </Header>
  );
};

export default MyHeader;
